<template>
  <v-container class="ma-4" v-if="getPersonsJson">
    <!-- <div>{{ getAdvantages }}</div> -->
    <h2>{{ getPersonsText[0].text }}</h2>
    <v-row justify="space-around">
      <v-card
        v-for="card in getPersonsItems"
        :key="card.name"
        :width="400"
        class="ma-4"
      >
        <v-card class="pa-1" :color="setColor(card.color)">
          <v-card
            height="550px"
            class="ma-1 pa-3 d-flex flex-column justify-end"
          >
            <v-row height="150px" class="d-flex justify-center align-center">
              <h4>{{ card.post }}</h4>
            </v-row>
            <v-img
              :src="`${getImgPath}${card.img}`"
              position="center center"
              height="250px"
              alt="logo"
              class="bg ih"
              contain
            >
            </v-img>
            <h2>{{ card.surname }}</h2>
            <h3>{{ card.name }}</h3>
          </v-card>
        </v-card>
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters([
      "getPersonsText",
      "getPersons",
      "getPersonsJson",
      "getImgPath",
    ]),
    getPersonsItems() {
      return this.getPersons[0].persons;
    },
  },
  methods: {
    setColor(clr) {
      return clr ? clr : "#335599";
    },
  },
};
</script>

<style lang="scss" scoped>
.v-card.text {
  font-size: 18px;
}
</style>